<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <!-- <div class="filter-container"> -->
    <el-row>

      <el-input
        v-model="keyword"
        clearable
        class="filter-item"
        style="width: 200px;marginRight:12px"
        placeholder="请输入角色名"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="marginRight:12px;"
        @click="getList"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="text"
        @click="handleAddRole"
      >新增</el-button>

    </el-row>

    <!-- </div> -->

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      style="marginTop:12px;"
      @row-click="handleRowClick"
    >
      <el-table-column
        align="center"
        width="100px"
        label="序号"
        prop="id"
        sortable
      />

      <el-table-column
        align="center"
        label="角色名称"
        prop="roleName"
      />

      <el-table-column
        align="center"
        label="操作"
        width="180"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            @click="handleDel(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />

    <!-- 角色编辑对话框 -->
    <el-dialog
      :visible.sync="showEditAlert"
      :title="Object.keys(currentRole).length == 0?'新增角色信息':'编辑角色信息'"
      width="40%"
    >
      <el-form
        :model="currentRole"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item
          label="角色名"
          prop="roleName"
        >
          <el-input v-model="currentRole.roleName" />
        </el-form-item>
        <el-form-item
          label="权限"
          prop="roleName"
        >
          <el-select
            v-model="selectedPList"
            placeholder="请选择"
            multiple
            style="width:100%;"
          >
            <el-option
              v-for="(item,idx) in permissionList"
              :key="idx"
              :label="item.permission_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="doneSaveRole"
        >保存</el-button>
        <el-button
          type="default"
          @click="showEditAlert = false"
        >取消</el-button>
      </div>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog
      title="确认删除"
      :visible.sync="showDelAlert"
      width="20%"
    >
      <span>确认删除该条记录?</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="default"
          @click="showDelAlert = false"
        >取消</el-button>
        <el-button
          type="danger"
          @click="doneDelModel"
        >删除</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  querySysRole,
  saveSysRole,
  deleteSysRole,
  readSysRole,
  modifySysRole,
  getById,
} from "@/api/role";
import { findSysPermission } from "@/api/user";

import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "User",
  components: { Pagination },
  data() {
    return {
      listLoading: false,
      pageNum: 1,
      pageSize: 30,
      total: 0,
      list: [],
      showEditAlert: false,
      showDelAlert: false,
      keyword: "",
      currentRole: {},

      //筛选权限
      permissionList: [],
      //选中的权限
      selectedPList: [],
    };
  },
  created() {
    this.getList();
    this.netFindSysPermission();
  },
  methods: {
    netFindSysPermission() {
      let self = this;
      findSysPermission()
        .then((response) => {
          self.permissionList = response;
        })
        .catch(() => {});
    },

    getList() {
      let self = this;
      this.listLoading = true;
      querySysRole({
        name: "",
        mobile: "",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        roleName: this.keyword,
      })
        .then((response) => {
          let { list, total } = response;
          self.list = list;
          this.$emit("RowClick", list[0]);
          self.listLoading = false;
          self.total = total;
        })
        .catch((e) => {
          self.list = [];
          self.total = 0;
          self.listLoading = false;
        });
    },

    handleFilter() {
      this.pageNum = 1;
      this.getList();
    },

    handleAddRole() {
      this.currentRole = {};
      this.showEditAlert = true;
    },

    handleDel(data) {
      this.currentRole = data;
      this.showDelAlert = true;
    },

    handleEdit(data) {
      this.selectedPList = [];
      this.netReadRoleInfo(data["id"]);
      this.showEditAlert = true;
    },

    handleRowClick(row) {
      this.$emit("RowClick", row);
    },

    doneSaveRole() {
      let self = this;
      let arr = [];
      this.selectedPList.map((item) => {
        arr.push({ permissionId: item });
      });
      this.currentRole.rolePermissionList = arr;
      if (this.currentRole.id == undefined) {
        saveSysRole(this.currentRole)
          .then((response) => {
            self.$message.success(`操作成功`);
            self.getList();
            self.showEditAlert = false;
          })
          .catch((e) => {
            self.$message.error(`${e}}`);
            self.showEditAlert = false;
          });
      } else {
        modifySysRole(this.currentRole)
          .then((response) => {
            self.$message.success(`操作成功`);
            self.getList();
            self.showEditAlert = false;
          })
          .catch((e) => {
            self.$message.error(`${e}}`);
            self.showEditAlert = false;
          });
      }
    },

    doneDelModel() {
      let self = this;
      deleteSysRole(this.currentRole)
        .then((response) => {
          self.$message.success(`操作成功`);
          self.getList();
          self.showDelAlert = false;
        })
        .catch((e) => {
          self.$message.error(`${e}}`);
          self.showDelAlert = false;
        });
    },

    netReadRoleInfo(rid) {
      let self = this;
      getById(rid).then((response) => {
        self.currentRole = response;
        self.selectedPList = response["rolePermissionList"].map(
          (item) => item.permissionId
        );
      });
    },
  },
};
</script>
